<template>
	<view v-if="!hide">
		<view :class="'nav-box '+bgstyle">
			<view :style="'height: '+top+'px;'"></view>
			<view class="nav-item">
				<view v-if="back" class="nav-back" @click="get_back()">
					<view class="icon"></view>
				</view>
				<view class="nav-info">
					<view class="nav-title" v-if="title">{{title}}</view>
				</view>
			</view>
		</view>
		<view :style="'height: '+top+'px;'"></view>
		<view class="nav-zwf"></view>
	</view>
</template>

<script>
    let that = null;
    export default {
		name:"navtop",
        props: {
            bgstyle: {
            	type: String,
            	default: ''
            },
            back: {
            	type: Boolean,
            	default: true
            },
            title: {
            	type: String,
            	default: function() {
            		return '';
            	}
            }
        },
        data() {
            return {
				hide: false,
				top: 0,
            }
        },
        mounted() {
            that = this;
			that.top = uni.getSystemInfoSync().statusBarHeight;
			// #ifdef APP-PLUS
			that.top = that.top + 6;
			// #endif
			// #ifdef H5
			that.hide = true;
			// #endif
        },
		methods: {
			get_back(){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				if(!prevPage){
					uni.switchTab({
						url:'/pages/index/index'
					});
					return;
				}
				uni.navigateBack();
			}
		}
    }
</script>

<style lang="scss">
    .nav-box{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 998;
		width: 100vw;
		min-height: 88rpx;
		background-color: rgb(255, 255, 255);
		color: rgb(0, 0, 0);
		.nav-item{
			width: 100%;
			height: 88rpx;
			padding: 9rpx 6rpx;
			line-height: 88rpx;
			display: flex;
			overflow: hidden;
			justify-content: space-between;
			box-sizing: border-box;
			transition-property: all;
			.nav-back{
				display: flex;
				align-items: center;
				width: 60rpx;
				height: 60rpx;
				margin-left: 10rpx;
				justify-content: center;
				.icon{width: 40rpx;height: 40rpx;background: url() center no-repeat;background-size: 100% 100%;}
			}
			.nav-info{
				position: absolute;
				left: 80rpx;
				right: 80rpx;
				min-width: 0;
				.nav-title{
					font-weight: 600;
					font-size: 32rpx;
					line-height: 60rpx;
					text-align: center;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}
	.nav-zwf{
		width: 100%;
		height: 88rpx;
	}
</style>